{% extends "templates/main_template.html.j2" %}

{% import "macros/issues_table.html.j2" as ISSUES_TABLE %}
{% import "macros/markdown_textarea.html.j2" as MARKDOWN_TEXTAREA %}
{% import "macros/tab_switcher.html.j2" as TAB_SWITCHER %}
{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}



{% block title -%}
  {{ project.caption|e }} версия: {{ version.caption|e }} · Farado
{%- endblock %}

{% set active_menu = 'projects' %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  {{ ISSUES_TABLE.STYLES() }}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
  {{ MARKDOWN_TEXTAREA.STYLES() }}
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/projects/project/{{ project.id }}">
        {{ project.caption|e }}
      </a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Версия {{ version.caption|e }}</li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block content %}
  <div class="row">
    <!-- Project view/edit switch -->
    <div class="col">
      <ul class="nav nav-pills mb-3 justify-content-end" id="pillsTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button
              class="nav-link active"
              id="pills-view-tab"
              data-bs-toggle="pill"
              data-bs-target="#pills-view"
              type="button"
              role="tab"
              aria-controls="pills-view"
              aria-selected="true">Просмотр</button>
        </li>
        <li class="nav-item" role="presentation">
          <button
              class="nav-link {% if not restriction.is_save_enabled %}disabled{% endif %}"
              id="pills-edit-tab"
              data-bs-toggle="pill"
              data-bs-target="#pills-edit"
              type="button"
              role="tab"
              aria-controls="pills-edit"
              {% if not restriction.is_save_enabled %}disabled{% endif %}
              aria-selected="false">Редактор</button>
        </li>
      </ul>
    </div>
  </div>

  <div class="row placeholders">
    <div class="tab-content" id="pillsTabContent">

      {# -- Контент вкладки: Просмотр -- #}
        <div
            class="tab-pane fade show active"
            id="pills-view"
            role="tabpanel"
            aria-labelledby="pills-view-tab">

          {# -- Текстовое описание версии -- #}
            <div class="col-12">
              <div id="version_content_view"></div>
            </div>
          {# -- /Текстовое описание версии -- #}

          {# -- Таблица запросов версии -- #}
            <div class="col-12">
              {{ ISSUES_TABLE.TAG(columns, column_helper) }}
            </div>
          {# -- /Таблица запросов версии -- #}

          {# -- Архивировать -- #}
            <div class="col-12">
              <a href="/projects/archive_version_issues/{{ version.id }}"
                  class="btn btn-outline-warning btn-sm"
                  type="button"
                  title="Архивировать все запросы, состояние которых 100%">
                Архивировать
              </a>
            </div>
          {# -- /Архивировать -- #}
        </div>
      {# -- /Контент вкладки: Просмотр -- #}

      <!-- EDIT -->
      <div
          class="tab-pane fade"
          id="pills-edit"
          role="tabpanel"
          aria-labelledby="pills-edit-tab">

        <form class="row g-3" action="/projects/version/{{ version.id }}" method="post">
          <input type="hidden" name="version_project_id" value="{{ project.id }}">

          {# -- Version.caption -- #}
          <div class="col-12">
            <label for="version_caption" class="form-label">Наименование</label>
            <input
                type="text"
                name="version_caption"
                class="form-control"
                id="version_caption"
                value="{{ version.caption|e }}" required>
          </div>

          {# -- Version.start_date -- #}
          <div class="col-md-6">
            <label for="version_start_date" class="form-label">Дата начала</label>
            <input
                type="date"
                name="version_start_date"
                class="form-control"
                id="version_start_date"
                value="{{ version.start_date }}">
          </div>

          {# -- Version.release_date -- #}
          <div class="col-md-6">
            <label for="version_release_date" class="form-label">Дата выпуска</label>
            <input
                type="date"
                name="version_release_date"
                class="form-control"
                id="version_release_date"
                value="{{ version.release_date }}">
          </div>

          {# -- Version.content -- #}
          <div class="col-12">
            <label for="version_content_tab" class="form-label">Контент</label>
            {{ MARKDOWN_TEXTAREA.INPUT(
                  tab_id='version_content_tab',
                  result_id='version_content_result',
                  field_name='version_content',
                  field_value=version.content|e )
            }}
          </div>

          {% if restriction.is_save_enabled %}
            <div class="col-12">
              <div class="clearfix">

                {% if version %}
                  {# -- Кнопка: удалить -- #}
                    {{ CONFIRMATION.BUTTON(
                        caption = '<i class="bi bi-trash"></i> Удалить',
                        title = 'Удалить данную версию',
                        class = 'btn btn-danger ml-3 float-start',
                        target = 'remove_issue_confirmation_'
                            + version.id|string)
                    }}
                    {{ CONFIRMATION.MODAL_WINDOW(
                        title = 'Удаление версии',
                        text = 'Вы уверены, что хотите навсегда удалить версию «'
                            + version.caption|e
                            + '»?',
                        action_button_href = '/projects/remove_version/'
                            + version.id|string,
                        action_button_text = 'Да',
                        window_id = 'remove_issue_confirmation_'
                            + version.id|string)
                    }}
                  {# -- /Кнопка: удалить -- #}
                {% endif %}

                {# -- Кнопка: сохранить -- #}
                  <button
                      type="submit"
                      id="saveButton"
                      class="btn btn-success float-end">
                    <i class="bi bi-save"></i> Сохранить
                  </button>
                {# -- /Кнопка: сохранить -- #}
              </div>
            </div>
          {% endif %}

        </form>
      </div>
    </div>

  </div>
{% endblock %}



{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ MARKDOWN_TEXTAREA.SCRIPTS() }}
  {{ ISSUES_TABLE.SCRIPTS() }}

  <script>
    document_ready_function = function() {
      {{ TAB_SWITCHER.DOCUMENT_READY_SCRIPT('pillsTab') }}
      {{ TAB_SWITCHER.DOCUMENT_READY_SCRIPT('version_content_tab') }}

      {% if project and version %}
        {{ ISSUES_TABLE.DOCUMENT_READY_SCRIPT(
            columns,
            column_helper,
            url="/projects/project_issues_data/"
                + project.id | string + "/" + version.id | string)
        }}
      {% endif %}

      markdownToHtml('version_content', 'version_content_view');
      markdownToHtml('version_content', 'version_content_result');

      {% if restriction.is_save_enabled and is_edit_mode %}
        /* {# Автоматический переход на вкладку редактирования версии
              после загрузки страницы #} */
        var tab = new bootstrap.Tab(document.querySelector('#pills-edit-tab'));
        tab.show();
      {% endif %}
    }
  </script>
{% endblock %}
